<template>
  <div class="w-100 h-100" id="gxsl"></div>
</template>

<script setup lang="ts">
import * as echarts from "echarts";
import { useOptions } from "@/hook/useOptions";
import { chartOptions } from "@/hook/chartOptions";

let myChart: any;
const jsonData: any = inject("jsonData");
const current = computed(() => {
  let data = [[], []];
  try {
    data = jsonData.value.underJsc.gxsl;
  } catch (error) {}

  return data;
});

watch(
  () => current.value,
  (val) => {
    if (val) {
      myChart.setOption({
        series: [{ data: val }],
      });
    }
  }
);

let option = {
  tooltip: {
    trigger: "axis",
    backgroundColor: "rgba(28,64,81,0.7)",
    borderColor: "transparent",
    textStyle: {
      color: "white",
      fontSize: 20,
    },
  },
  legend: {
    data: ["直接访问", "背景"],
    show: false,
  },
  grid: {
    left: "0%",
    right: "0%",
    bottom: "5%",
    top: "10%",
    height: "85%",
    containLabel: true,
    z: 22,
  },
  xAxis: [
    {
      type: "category",
      gridIndex: 0,
      data: useOptions().guanxianType,
      axisTick: {
        show: false,
      },
      axisLine: {
        show: false,
      },

      axisLabel: {
        show: true,
        fontSize: 20,
        color: "#667A8E",
      },
    },
  ],
  yAxis: [
    {
      name: "条",
      type: "value",
      gridIndex: 0,
      nameTextStyle: {
        color: "rgba(255,255,255,1)",
        fontSize: 20
      },
      splitLine: {
        lineStyle: {
          opacity: 0.2,
        },
      },
      axisTick: {
        show: false,
      },
      axisLabel: {
        fontSize: 20,
        color: "#667A8E"
      },
    },
  ],
  series: [
    {
      name: "",
      type: "bar",
      barWidth: "20",
      xAxisIndex: 0,
      yAxisIndex: 0,
      itemStyle: {
        normal: {
          barBorderRadius: 30,
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: "#fff",
            },
            {
              offset: 0.2,
              color: "#5CE1FF",
            },
            {
              offset: 1,
              color: "rgba(92, 225,225, 0)",
            },
          ]),
        },
      },
      data: [],
      zlevel: 11,
    },
  ],
};

onMounted(() => {
  myChart = echarts.init(document.getElementById("gxsl") as HTMLElement);
  myChart.setOption(option);
});
</script>
